<template>
    <div class="add-client" style="width: 100%;">
        <div class="header" style="background-color: white" v-if="law==undefined || law==null">
            <el-page-header @back="goBack" content="添加客户" style="position: relative;top: 10px;left: 5px;">
            </el-page-header>
            <el-divider></el-divider>
        </div>

        <el-form :model="client" class="form-law" label-width="120px" style="width: 100%">
            <!--必要项-->
            <el-container class="decrease-add-container">
                <el-header class="title">
                    <i class="el-icon-user-solid">基本资料/必填项</i>
                </el-header>
                <el-divider></el-divider>
                <el-container>
                    <el-form-item label="客户：">
                        <el-input v-model="client.client" style="width: 500px"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码：">
                        <el-input v-model="client.phone" style="width: 500px"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="客户类型：">
                        <el-select
                                @change="handleChangeType"
                                v-model="client.type"
                                placeholder="请选择" value="" style="width: 500px">
                            <el-option
                                    v-for="clientType in clientTypeList"
                                    :key="clientType.id"
                                    :label="clientType.clientType"
                                    :value="clientType.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="身份证号：">
                        <el-input v-model="client.cardnum" style="width: 500px" :readonly="this.law!=undefined && this.law.cardNum!='' && this.law.cardNum!=undefined"></el-input>
                    </el-form-item>
                </el-container>

                <el-container>
                    <el-form-item label="身份特征：" v-if="typeInfoActive==1">
                        <el-checkbox-group v-model="checkedList" @change="handleSetTypeInfo">
                            <el-checkbox
                                    :key="own"
                                    v-for="own in ownList"
                                    :label="own"
                            ></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item label="类型：" v-if="typeInfoActive==2">
                        <el-cascader
                                style="width: 500px"
                                v-model="office"
                                :options="officeList"
                                @change="handleOfficeChange"></el-cascader>
                    </el-form-item>

                    <el-form-item label="类型：" v-if="typeInfoActive==4">
                        <el-select v-model="client.typeinfo" :value="client.typeinfo" style="width: 500px">
                            <el-option label="请选择" value=""></el-option>
                            <el-option
                                    :key="team"
                                    v-for="team in teamList"
                                    :label="team"
                                    :value="team"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <div v-if="typeInfoActive==3">
                        <el-form-item label="类型：">
                            <el-select @change="handleCompanyChange" v-model="company" :value="company" style="width: 500px">
                                <el-option
                                        :key="company"
                                        v-for="company in companyList"
                                        :label="company"
                                        :value="company"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="单位类型：">
                            <el-radio-group @change="handleCompanyChange" v-model="companyType" :value="companyType" style="width: 1000px">
                                <el-radio
                                        :key="companyType"
                                        v-for="companyType in companyTypeList"
                                        :label="companyType"
                                        :value="companyType"
                                ></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                </el-container>
            </el-container>

            <!--可选项头部-->
            <el-container class="decrease-add-container">
                <el-header class="title">
                    <i class="el-icon-user-solid">其他选填</i>
                    <el-button size="mini" @click="handleToggleOther" class="toogle">{{other.text}}</el-button>
                </el-header>
                <el-divider></el-divider>

                <!--其他选项-->
                <div v-show="other.enable" class="other">
                    <el-container>
                        <el-form-item label="主要负责人：">
                            <el-input v-model="client.principal" style="width: 500px"></el-input>
                        </el-form-item>
                        <el-form-item label="业务联系人：">
                            <el-input v-model="client.contact" style="width: 500px"></el-input>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="邮箱：">
                            <el-input v-model="client.email" style="width: 500px"></el-input>
                        </el-form-item>
                        <el-form-item label="职务：">
                            <el-input v-model="client.duty" style="width: 500px"></el-input>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="地区影响力：">
                            <el-input v-model="client.affectedareas" style="width: 500px"></el-input>
                        </el-form-item>
                        <el-form-item label="固定电话：">
                            <el-input v-model="client.tel" style="width: 500px"></el-input>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="省份：">
                            <el-select
                                    v-model="client.province"
                                    placeholder="请选择" value="" style="width: 500px"
                                    @change="handleChangeProvince">
                                <el-option label="请选择" value=""></el-option>
                                <el-option
                                        v-for="province in provinceList"
                                        :key="province.code"
                                        :label="province.name"
                                        :value="province.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="城市：">
                            <el-select
                                    v-model="client.city"
                                    placeholder="请选择" value="" style="width: 500px">
                                <el-option label="请选择" value=""></el-option>
                                <el-option
                                        v-for="city in cityList"
                                        :key="city.code"
                                        :label="city.name"
                                        :value="city.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-container>

                    <el-row>
                        <el-form-item label="客户状态：">
                            <el-select v-model="client.status" style="width: 500px" :value="client.status">
                                <el-option value="" label="请选择"></el-option>
                                <el-option :value="1" label="潜在客户"></el-option>
                                <el-option :value="2" label="目标客户"></el-option>
                                <el-option :value="3" label="正式客户"></el-option>
                                <el-option :value="4" label="有效客户"></el-option>
                                <el-option :value="5" label="无效客户"></el-option>
                                <el-option :value="6" label="重点跟进"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-row>

                    <el-container>
                        <el-form-item label="法定代表人：">
                            <el-input v-model="client.legalperson" style="width: 500px"></el-input>
                        </el-form-item>
                        <el-form-item label="法人联系方式：">
                            <el-input v-model="client.legalpersontel" style="width: 500px"></el-input>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="民族：">
                            <el-select
                                    v-model="client.nation"
                                    placeholder="请选择" value="" style="width: 500px">
                                <el-option label="请选择" value=""></el-option>
                                <el-option
                                        v-for="nation in nationList"
                                        :key="nation.id"
                                        :label="nation.name"
                                        :value="nation.name">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="性别：">
                            <el-select v-model="client.sex"
                                       placeholder="请选择" value="" style="width: 500px">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="出生日期：">
                            <el-date-picker
                                    v-model="client.birth"
                                    align="right"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    style="width: 500px">
                            </el-date-picker>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="详细地址：">
                            <el-input v-model="client.address" style="width: 1050px"></el-input>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="描述：">
                            <el-input type="textarea" v-model="client.remark" style="width: 1050px"></el-input>
                        </el-form-item>
                    </el-container>

                    <el-container>
                        <el-form-item label="相关文件：">
                            <el-upload
                                    name="multipartfile"
                                    action="http://localhost/upload"
                                    :headers="{token:this.$store.state.token}"
                                    :data="{folder:'client'}"
                                    class="upload-demo"
                                    ref="upload"
                                    :limit="1"
                                    :multiple="false"
                                    :auto-upload="false"
                                    :on-success="handleUploadSuccess">
                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                            </el-upload>
                        </el-form-item>
                        <el-input v-model="client.file" v-show="false"></el-input>
                    </el-container>
                </div>
            </el-container>

            <el-container>
                <el-form-item>
                    <el-button type="primary" @click="handleSubmit">确定提交</el-button>
                </el-form-item>
            </el-container>
        </el-form>
    </div>
</template>

<script>
    //引入客户服务类
    import ClientTypeService from '../../../model/gs/ClientTypeService.js'
    //引入地区数据
    import {address} from "../../../assets/json/pc-code";
    //引入民族数据
    import {nationList} from "../../../assets/json/nation";
    //拿到客户服务对象
    const clientTypeService = ClientTypeService.getInstance()

    export default {
        props: ['law', 'active','status','parentClient'],
        data() {
            return {
                typeInfoActive:1,
                client: {
                    client:'',
                    phone:'',
                    principal:'',
                    contact:'',
                    email:'',
                    duty:'',
                    affectedareas:'',
                    tel:'',
                    type: 1,
                    cardnum: this.law!=undefined?this.law.cardNum:'',
                    province: '',
                    city: '',
                    nation: '',
                    sex: '男',
                    typeinfo:'',
                    status:'',
                    legalperson:'',
                    legalpersontel:'',
                    birth:'',
                    address:'',
                    remark:''
                },
                clientTypeList: [],
                //公民个人身份数组
                ownList: [
                    '妇女', '未成年人', '残疾人', '老年人',
                    '农民', '农民工', '下岗职工', '城市居民', '外来人员'
                ],
                //机关单位数组
                officeList:[
                    {
                        value:'政府',
                        label:'政府',
                        children:[
                            {value:'省级政府',label:'省级政府'},
                            {value:'市级政府',label:'市级政府'},
                            {value:'县级政府',label:'县级政府'},
                            {value:'乡级政府',label:'乡级政府'},
                            {value:'街道办事处',label:'街道办事处'}
                        ]
                    },
                    {
                        value:'政府部门',
                        label:'政府部门',
                        children:[
                            {value:'国家部委办',label:'国家部委办'},
                            {value:'省政府部门',label:'省政府部门'},
                            {value:'市级政府部门',label:'市级政府部门'},
                            {value:'县级政府部门',label:'县级政府部门'}
                        ]
                    }
                ],
                office:'',
                //社会团体数组
                teamList:[
                    '商会','行业协会','其他社团组织'
                ],
                //公司企业数组
                companyList:[
                    '国有','民营','外资'
                ],
                //公司类型数组
                companyTypeList:[
                    '世界500强','国家500强','上市公司','规上企业','小微企业'
                ],
                companyType:'',
                company:'',
                //选中的身份特征数组
                checkedList: [],
                other: {
                    text: '展开',
                    enable: false
                },
                //省份数组
                provinceList: [],
                //城市数组
                cityList: [],
                //民族数组
                nationList: nationList
            }
        },
        methods: {
            //查询客户类型
            getClientTypeList() {
                clientTypeService.list().then(response => {
                    if (response.data.code === 0) {
                        this.clientTypeList = response.data.data
                    }
                })
            },
            //当复选框选中的数量改变时执行的方法
            handleSetTypeInfo() {
                this.client.typeinfo = this.checkedList.join(',')+','
            },
            //查询地区的方法
            getProvinceList() {
                this.provinceList = []
                address.forEach(item => this.provinceList.push(item))
            },
            handleChangeProvince(province,city) {
                try {
                    address.forEach(item => {
                        if (item.name == this.client.province) {
                            this.cityList = item.childs
                            if(city!=null){
                                this.client.city = city
                            }else{
                                this.client.city = ''
                            }
                            throw new Error()
                        } else {
                            this.cityList = []
                        }
                    })
                } catch (e) {
                    return e
                }
            },
            //切换其他选项是否显示
            handleToggleOther() {
                this.other.enable = !this.other.enable
                if (this.other.enable) {
                    this.other.text = '收起'
                } else {
                    this.other.text = '展开'
                }
            },
            //文件上传成功的回调
            handleUploadSuccess(response) {
                this.client.file = response.data
            },
            submitUpload(){
                this.$refs.upload.submit();
            },
            //表单提交的方法
            handleSubmit() {
                //判断是添加还是修改
                if(this.status == 'update'){
                    this.$emit('update',this.client)
                }else{
                    this.$emit('add',this.client)
                }
            },
            //客户类型选择变化执行的方法
            handleChangeType(){
                this.office = []
                this.client.typeinfo = ''
                this.checkedList = []
                this.typeInfoActive = this.client.type
                if(this.typeInfoActive == 5){
                    this.client.typeinfo = '其他'
                }
                if(this.typeInfoActive == 3){
                    this.company = '国有'
                    this.companyType = '小微企业'
                    this.client.typeinfo = this.company+','+this.companyType
                }
            },
            //公司改变的方法
            handleCompanyChange(){
                this.client.typeinfo = this.company + ',' + this.companyType
            },
            //机关单位改变的方法
            handleOfficeChange(){
                this.client.typeinfo = this.office.join(',')
            },
            //判断是否是修改
            setClient(){
                if(this.status == 'update'){
                    for (let field in this.parentClient){
                        this.client[field] = this.parentClient[field]
                    }
                    this.client.type = Number.parseInt(this.client.type)
                    this.typeInfoActive = this.client.type
                    if(this.client.pertainarea!=null && this.client.pertainarea!=undefined){
                        let split = []
                        //设置省份和城市
                        if(this.client.pertainarea.indexOf('省')!=-1){
                            split = this.client.pertainarea.split('省')
                            this.client.province = split[0] + '省'
                        }else if(this.client.pertainarea.indexOf('区')!=-1){
                            split = this.client.pertainarea.split('区')
                            this.client.province = split[0] + '区'
                        }else{
                            split = this.client.pertainarea.split('市')
                            this.client.province = split[0] + '市'
                        }
                        this.client.city = split[1]
                        this.handleChangeProvince(null,split[1])
                    }
                    //设置客户类型
                    switch (this.client.type) {
                        case 1:this.checkedList=this.client.typeinfo.split(',');break;
                        case 2:this.office=this.client.typeinfo.split(',');break;
                        case 3:
                            this.company = this.client.typeinfo.split(',')[0]
                            this.companyType = this.client.typeinfo.split(',')[1]
                            break
                    }
                }
            },
            goBack(){
                this.$emit('back')
            }
        },
        watch: {
            law: {
                handler: function () {
                    this.client.cardnum = this.law!=undefined?this.law.cardNum:''
                },
                deep: true
            },
            active: {
                handler() {
                    if(this.active == 2){
                        this.getProvinceList()
                    }
                }
            }
        },
        created(){
            this.setClient()
            this.getClientTypeList()
            if(this.$route.path != 'Choice'){
                this.getProvinceList()
            }
        }
    }
</script>

<style scoped>
    .decrease-add-container {
        width: 100%;
    }

    .title {
        font-size: 20px;
        position: relative;
        top: 30px;
    }

    .form-law {
        margin-left: 50px;
    }

    .toogle {
        margin-left: 30px;
    }

    .other {
        width: 100%;
    }
</style>
